<template>
	<div class="container" @click="handleGallaryClick()">
		<div class="wrapper">
			<swiper :options="swiperOption" >
			    	<!-- slides -->
			    <swiper-slide 
			    	v-for="(item,index) of gallaryList" 
			    	:key="'gallary' + index"
		    	>
		    		<img class="gallary-img" :src="item">
		    	</swiper-slide>
			    
			    <!-- Optional controls -->
			    <div 
			    	class="swiper-pagination"  
			    	slot="pagination"
		    	></div>
			  </swiper>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		name: 'gallary',
		props: {
			gallaryList: Array
		},
		data () {
			return {
				swiperOption: {
					pagination: {
						el: '.swiper-pagination',
						type: 'fraction'
					},	
					loop: true,
				  observer:true,
    			observeParents:true,
				}
			}
		},
		methods: {
			handleGallaryClick () {
				this.$emit('close');
			}
		}
	}
</script>

<style lang="stylus">
	.container
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		background: #000;
		.wrapper
			height: 0;
			width: 100%;
			padding-bottom: 55%;
			.gallary-img
				width: 100%;
			.swiper-pagination
				color: #fff;
</style>